<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>


</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">用户列表</div>
        <div class="layui-card-body">
            <form class="layui-form layui-row layui-col-space16">
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="username" placeholder="请输入用户名" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-cellphone"></i>
                        </div>
                        <input type="text" name="phone" placeholder="请输入手机号" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="data-search-btn">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i> 重置
                        </button>
                    </div>
                </div>
            </form>
            <hr>
            <table id="userlist" lay-filter="userFilter"></table>
        </div>
    </div>
</div>
<!--用户信息对话框-->
<div id="userInfoDialog">
    <table class="layui-table" lay-size="sm">
        <tr>
            <td>头像</td>
            <td><img id="headimg" src="" alt=""></td>
        </tr>
        <tr>
            <td>用户名</td>
            <td><span id="username"></span></td>
        </tr>
        <tr>
            <td>昵称</td>
            <td><span id="nickname"></span></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><span id="sex"></span></td>
        </tr>
        <tr>
            <td>电话</td>
            <td><span id="phone"></span></td>
        </tr>
        <tr>
            <td>生日</td>
            <td><span id="birth"></span></td>
        </tr>
        <tr>
            <td>注册时间</td>
            <td><span id="regtime"></span></td>
        </tr>
        <tr>
            <td>个性签名</td>
            <td><span id="mark"></span></td>
        </tr>
    </table>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //加载获取 table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        //加载form表单模块
        var form = layui.form;
        //加载jquery对象
        var $ = layui.jquery;
        
        // 渲染用户表格
        var userTable = table.render({
            elem: '#userlist',
            url: '/user/list',
            method: 'get',
            page: true,
            limit: 5,
            limits: [5,10, 20, 50],
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'username', title: '用户名', width: 120},
                {field: 'nickname', title: '昵称', width: 120},
                {field: 'phone', title: '手机号', width: 150},
                {field: 'email', title: '邮箱', width: 180},
                {field: 'sex', title: '性别', width: 80},
                {field: 'createTime', title: '注册时间', width: 180, templet: function(d) {
                    return d.createTime ? new Date(d.createTime).toLocaleString() : '';
                }},
                {field: 'status', title: '状态', width: 100, templet: function(d) {
                    return d.status === 1 ? 
                        '<span style="color: green;">正常</span>' : 
                        '<span style="color: red;">禁用</span>';
                }},
                {title: '操作', width: 200, align: 'center', toolbar: '#rowTools'}
            ]],
            response: {
                statusCode: 0 // 成功状态码
            },
            parseData: function(res) {
                return {
                    code: res.code,
                    msg: res.msg,
                    count: res.data.total, // 总记录数
                    data: res.data.records // 数据列表
                };
            }
        });
        
        // 监听搜索提交
        form.on('submit(data-search-btn)', function(data) {
            var formData = data.field;
            
            // 执行搜索
            table.reload('userlist', {
                page: {
                    curr: 1
                },
                where: {
                    username: formData.username,
                    phone: formData.phone
                }
            });
            
            return false; // 阻止表单默认提交
        });
        
        // 监听工具栏事件
        table.on('tool(userFilter)', function(obj) {
            var data = obj.data;
            var layEvent = obj.event;
            
            if (layEvent === 'details') {
                // 查看详情
                showUserInfo(data);
            } else if (layEvent === 'del') {
                // 删除用户
                deleteUser(data.id);
            } else if (layEvent === 'updateStatus') {
                // 更新状态
                var newStatus = data.status === 1 ? 0 : 1;
                var statusText = newStatus === 1 ? '启用' : '禁用';
                layer.confirm('确定要' + statusText + '该用户吗？', function(index) {
                    $.ajax({
                        url: '/user/status',
                        method: 'PUT',
                        data: {
                            id: data.id,
                            status: newStatus
                        },
                        success: function(res) {
                            if (res.success) {
                                layer.msg('状态更新成功');
                                obj.update({
                                    status: newStatus
                                });
                            } else {
                                layer.msg(res.msg || '状态更新失败');
                            }
                        },
                        error: function() {
                            layer.msg('请求失败');
                        }
                    });
                    layer.close(index);
                });
            }
        });
        
        // 显示用户详情
        function showUserInfo(userData) {
            var content = '<table class="layui-table">' +
                '<tr><td>用户名:</td><td>' + (userData.username || '') + '</td></tr>' +
                '<tr><td>昵称:</td><td>' + (userData.nickname || '') + '</td></tr>' +
                '<tr><td>手机号:</td><td>' + (userData.phone || '') + '</td></tr>' +
                '<tr><td>邮箱:</td><td>' + (userData.email || '') + '</td></tr>' +
                '<tr><td>性别:</td><td>' + (userData.sex || '') + '</td></tr>' +
                '<tr><td>注册时间:</td><td>' + (userData.createTime ? new Date(userData.createTime).toLocaleString() : '') + '</td></tr>' +
                '<tr><td>状态:</td><td>' + (userData.status === 1 ? '正常' : '禁用') + '</td></tr>' +
                '</table>';
                
            layer.open({
                type: 1,
                title: '用户详情',
                content: content,
                area: ['400px', '350px']
            });
        }
        
        // 删除用户
        function deleteUser(userId) {
            layer.confirm('确定要删除该用户吗？', function(index) {
                $.ajax({
                    url: '/user/delete',
                    method: 'DELETE',
                    data: {
                        id: userId
                    },
                    success: function(res) {
                        if (res.success) {
                            layer.msg('删除成功');
                            table.reload('userlist');
                        } else {
                            layer.msg(res.msg || '删除失败');
                        }
                    },
                    error: function() {
                        layer.msg('请求失败');
                    }
                });
                layer.close(index);
            });
        }
    })
</script>


<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-list"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
        {{# if(d.status === 0){ }}
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateStatus" data-status="1">
            <i class="layui-icon layui-icon-close-fill"></i>
            禁用
        </button>
        {{# }else{ }}
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateStatus" data-status="0">
            <i class="layui-icon layui-icon-ok-circle"></i>
            启用
        </button>
        {{# } }}
    </div>
</script>


</body>
</html>